@charset "utf-8";
@import "reset";
body,html{
    background: #000;
    font-size: 0;
}
.phone{
    margin:50px auto;
    width: 300px;
    height: 600px;
    overflow: hidden;
    position: relative;
    .content{
        width:100%;
        height:100%;
        background: url(../img/21.png) no-repeat;
        background-size: cover;
        overflow: hidden;
        background-position-x: -37px;
        font-size: 0;
        position:relative;
        .car{
            width: 150px;
            height: 70px;
            margin-top: 295px;
            margin-left: 55px;
            background-size:105%
        }
        .ordinary,.enhancedVersion{
            width: 100px;
            height: 35px;
            margin: 10px auto;
            cursor: pointer;
            img{
                width: 100%;
            }
        }
    }
    .one,.two{
        width: 100%;
        height: 100%;
        background: url(../img/gameBg.png ) no-repeat;
        background-size:cover;
        position: absolute;
        top: 0;
        z-index: 2;
        display: none;
        p{
            font-size: 28px;
            color:white;
            margin-top: 35px;
            margin-left: 115px;
            font-weight:bold;
        }
        .all{
            width: 95%;
            margin: 75px auto 0;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-around;
            .img{
                font-size: 0;
                display: inline-block;
                width: 53px;
                height: 53px;
                border-radius:10px;
                overflow: hidden;
                margin: 5px 3.5px;
                z-index: 99;
                transition: 500ms ;
                transform: scale(1);
                position: relative;
                //设置其为3D模式
                perspective:1000px;
                transform-style: preserve-3d;
                img{
                    width: 100%;
                    height: 100%;
                    transition: 500ms;
                    cursor: pointer;
                    position: absolute;
                    border-radius:10px;
                    top: 0;
                    left: 0;
                    //背景不透明 表示翻转过后看不到背面
                    -webkit-backface-visibility:hidden;
                    backface-visibility:hidden;
                }
                .img1{
                    transform:rotateY(0);
//                  visibility: hidden; 
                }
                .img2{
                    transform:rotateY(-180deg) 
                }
            }
        }
    }
}
